import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import { viteMockServe } from 'vite-plugin-mock'

import path from 'path'
//使用svg-icons插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
//引入element-plus 自动引入配置
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 自动导入Icon图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'

import dependenciesPlugin from './vite-plugin-dependencies.js'

const port = process.env.port || process.env.npm_config_port || 80 // 端口
//const proxyPrefix = process.env.VITE_APP_BASE_API //代理前缀地址

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), '')
    const enableMock = env.EnableMock === 'true'
    return {
        plugins: [
            vue(),
            // mock文件
            viteMockServe({
                // mock文件存放目录
                mockPath: 'mock',
                // 是否开启mock功能
                enable: enableMock
            }),
            vueJsx(),
            vueDevTools(),
            //element-plus 自动引入配置
            AutoImport({
                eslintrc: {
                    enabled: true, // 生成 .eslintrc-auto-import.json
                    filepath: './.eslintrc-auto-import.json', // 默认路径
                    globalsPropValue: true // 设置为 true 表示这些全局变量是可写的
                },
                resolvers: [
                    ElementPlusResolver(),
                    // 自动导入图标组件
                    IconsResolver({
                        prefix: 'Icon'
                    })
                ]
            }),
            Components({
                resolvers: [
                    // 自动导入 Element Plus 组件
                    ElementPlusResolver(),
                    // 自动注册图标组件
                    IconsResolver({
                        // 修改Icon组件前缀，不设置则默认为i,禁用则设置为''
                        prefix: '',
                        // 指定collection，即指定为elementplus图标集ep
                        // enabledCollections: ['ep'],// 这是可选的，默认启用 Iconify 支持的所有集合['mdi']
                        //自定义集合名
                        customCollections: ['custom']
                    })
                ]
            }),
            // Icons图标自动下载
            Icons({
                /* options */
                scale: 1, // Scale of icons against 1em
                // defaultStyle: "", // Style apply to icons
                // defaultClass: "", // Class names apply to icons
                // compiler: null, // 'vue2', 'vue3', 'jsx'
                // jsx: "react", // 'react' or 'preact'
                autoInstall: true, // 自动安装图标库
                customCollections: {
                    // 加载该目录下所有 用法： {collection}-{icon}
                    custom: FileSystemIconLoader('./src/assets/icons')
                },
                iconCustomizer(collection, icon, props) {
                    // customize all icons in this collection
                    if (collection === 'custom') {
                        // 设置宽度和高度
                        props.width = '1em'
                        props.height = '1em'
                        // 设置填充颜色
                        props.fill = 'currentColor'
                        // 设置描边颜色和宽度
                        // props.stroke = '#000'
                        // props.strokeWidth = 2
                        // 设置视图框
                        // props.viewBox = '0 0 24 24'
                    }
                }
            }),
            // 注册所有的svg文件生成svg雪碧图
            createSvgIconsPlugin({
                // 配置路径, 项目存放icons的目录
                iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
                symbolId: 'icon-[dir]-[name]',
                inject: 'body-last', // 插入的位置
                customDomId: '__svg__icons__dom__' // svg的id
            }),
            dependenciesPlugin()
        ],
        css: {
            // css预处理器
            preprocessorOptions: {
                scss: {
                    charset: false,
                    api: 'modern-compiler',
                    //需要在assets下创建对应的文件global.scss
                    additionalData: '@use "@/assets/style/global.scss" as *;'
                }
            }
        },
        server: {
            open: true,
            host: '0.0.0.0', // 监听所有地址
            //port:  port,
            proxy: {
                '/dev-api': {
                    target: 'http://localhost:15775', // 目标地址
                    changeOrigin: true, // 是否跨域
                    rewrite: (path) => path.replace(/^\/dev-api/, '') // 重写路径，去掉代理前缀
                }
            }
        },
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url)),
                vue: 'vue/dist/vue.esm-bundler.js'
            }
        }
    }
})
